{%extends 'dbmp_base.html' %}

{% load staticfiles %}

<!-- 添加该页面自己需要的 css 模板 -->
{% block css %}
    <link href="{% static 'css/plugins/footable/footable.core.css' %}" rel="stylesheet">
    <link href="{% static 'css/plugins/sweetalert/sweetalert.css' %}" rel="stylesheet">
{% endblock %}


<!-- 显示该页面标题 -->
{% block app_title %}业务组列表{% endblock %}

<!-- 其他元素模块 -->
{% block top_element %}
<!-- 业务组按钮 -->
<div class="row fontawesome-icon-list">
    <div class="fa-hover col-md-2 col-sm-3 pull-right">
        <a href="{% url 'dbmp_mysql_business_add' %}">
            <i class="fa fa-plus-square"></i>
            添加业务组
        </a>
    </div>
</div>
{% endblock %}

<!-- 显示该页面主要展示的内容 -->
{% block content %}
<table class="footable table table-stripped toggle-arrow-tiny table-hover">
    <thead>
        <tr>
            <th class="text-center">#</th>
            <th class="text-center">组名称</th>
            <th class="text-center">备注</th>
            <th class="text-center">创建时间</th>
            <th class="text-center">更新时间</th>
            <th class="text-center col-xs-3">操作</th>
            <th data-hide="all">更多操作</th>
        </tr>
    </thead>

    <tbody>
        {% for dbmp_mysql_business in pagination.objs %}
        <tr>
            <td class="text-center">{{ forloop.counter }}</td>
            <td class="text-center">{{ dbmp_mysql_business.name }}</td>
            <td class="text-center">{{ dbmp_mysql_business.remark }}</td>
            <td class="text-center">{{ dbmp_mysql_business.create_time | date:"Y-m-d H:i:s" }}</td>
            <td class="text-center">{{ dbmp_mysql_business.update_time | date:"Y-m-d H:i:s" }}</td>
            <td class="text-center">
                <a onclick="dbmp_mysql_business_delete({{ dbmp_mysql_business.mysql_business_id }}, {{ pagination.cur_page }})"
                   type="button" class="btn btn-danger btn-xs">
                    <i class="fa fa-trash"></i>
                    删除
                </a>
                <a href="{% url 'dbmp_mysql_business_edit' %}?mysql_business_id={{ dbmp_mysql_business.mysql_business_id }}" 
                   type="button" class="btn btn-primary btn-xs">
                    <i class="fa fa-edit"></i>
                    编辑
                </a>
                <a href="{% url 'dbmp_mysql_business_view' %}?mysql_business_id={{ dbmp_mysql_business.mysql_business_id }}" 
                   type="button" class="btn btn-info btn-xs">
                    <i class="fa fa-eye"></i>
                    查看
                </a>
            </td>
            <td class="text-center">
                <button type="button" id="business_detail_{{ dbmp_mysql_business.mysql_business_id }}"
                        class="more_btn btn btn-success btn-xs btn-outline"
                        onclick="business_detail({{ dbmp_mysql_business.mysql_business_id }})">
                    <i class="fa fa-cubes"></i>
                    业务组数据库列表
                </button>
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>

<!-- 这里是分页页码 -->
<div class="btn-group">
    <!-- 第一页, 上一页 -->
    {% if pagination.cur_page != 1 and pagination %}
        <a type="button" class="btn btn-primary btn-outline" href="?cur_page=1">
            <i class="fa fa-angle-double-left"></i>
        </a>
        <a type="button" class="btn btn-primary btn-outline" href="?cur_page={{ pagination.pre_page }}">
            <i class="fa fa-angle-left"></i>
        </a>
    {% endif %}
    
    <!-- 省略号 -->
    {% if pagination.start_page_omit_symbol %}
        <a type="button" class="btn btn-write btn-outline">
            <i class="fa fa-ellipsis-h"></i>
        </a>
    {% endif %}
    
    <!-- 能点击的页码 -->
    {% for page_item in pagination.page_items %}
        {% if page_item == pagination.cur_page %}
            <a type="button" class="btn btn-primary">{{ page_item }}</a>
        {% else %}
            <a type="button" class="btn btn-primary btn-outline" href="?cur_page={{ page_item }}">{{ page_item }}</a>
        {% endif %}
    {% endfor%}
    
    <!-- 省略号 -->
    {% if pagination.end_page_omit_symbol %}
        <a type="button" class="btn btn-write btn-outline">
            <i class="fa fa-ellipsis-h"></i>
        </a>
    {% endif %}
    
    <!-- 下一页, 最后一页 -->
    {% if pagination.cur_page != pagination.all_page and pagination %}
        <a type="button" class="btn btn-primary btn-outline" href="?cur_page={{ pagination.next_page }}">
            <i class="fa fa-angle-right"></i>
        </a>
        <a type="button" class="btn btn-primary btn-outline" href="?cur_page={{ pagination.all_page }}">
            <i class="fa fa-angle-double-right"></i>
        </a>
    {% endif %}
</div>
{% endblock %}

<!-- 添加该页面自己需要的 js 模板 -->
{% block js %}
    <script src="{% static 'js/content.min.js' %}"></script>
    <script src="{% static 'js/plugins/footable/footable.all.min.js' %}"></script>
    <script src="{% static 'js/plugins/sweetalert/sweetalert.min.js' %}"></script>
    <script src="{% static 'js/plugins/layer/layer.min.js' %}"></script>

    <script>
        // 使用 Django csrf 功能
        $.ajaxSetup({headers: {"X-CSRFToken": '{{ csrf_token }}'}});

        $(document).ready(function(){
            // 表格插件
            $(".footable").footable();
        });

        //删除 dbmp_mysql_business
        function dbmp_mysql_business_delete(mysql_business_id, cur_page) {
            $(".confirm").unbind("click");
            swal({
                title: "您确定要删除这条信息吗?",
                text: "删除后将无法恢复，请谨慎操作！",
                type: "warning",
                showCancelButton: true,
                confirmButtonColor: "#DD6B55",
                confirmButtonText: "删除",
                closeOnConfirm: false
            }, function () {
                $.ajax({
                    url: "{% url 'dbmp_mysql_business_ajax_delete' %}",
                    type: "POST",
                    dataType: "json",
                    data: {
                        mysql_business_id: mysql_business_id
                    }
                }).done(function(data) { 
                    if(data == true) {
                        swal("删除成功!", "已成功删除数据！", "success");
                        $(".confirm").click(function(){
                            setTimeout("location.reload()", 500);
                        });
                    } else {
                        swal("对不起!", "删除数据失败了!", "error");
                    }
                }).error(function(data) { 
                    swal("对不起!", "删除操作失败了(调用删除方法失败)!", "error");
                });
            });
        }

        // 打开一个业务数据库列表标记页面
        function business_detail(mysql_business_id) {
            url = "";
            url += "{% url 'dbmp_mysql_business_detail_index' %}";
            url += "?mysql_business_id=" + mysql_business_id;
            open_iframe_window("业务数据库列表", url);
        }

        // 打开一个 iframe 窗口
        function open_iframe_window(tab_name, url) {
            var timestamp = (new Date()).valueOf(); 
            iframe_name = "name" + timestamp;

            // iframe 菜单 标签
            iframe_tab = '';
            iframe_tab += '<a href="javascript:;" class="active J_menuTab" ';
            iframe_tab += 'data-id="'+ timestamp +'">' + tab_name;
            iframe_tab += '<i class="fa fa-times-circle"></i>';
            iframe_tab += '</a>';

            // iframe 内容
            iframe_content = '';
            iframe_content += '<iframe class="J_iframe" name="'+ iframe_name +'" width="100%" height="100%" ';
            iframe_content += 'src="' + url + '" frameborder="0" ';
            iframe_content += 'data-id="'+ timestamp +'" seamless style="display: inline;">';
            iframe_content += '</iframe>';

            // 打开标签和 iframe
            $(".page-tabs .page-tabs-content .J_menuTab", parent.document).removeClass('active');
            $(".page-tabs .page-tabs-content", parent.document).append(iframe_tab);
            $("#content-main .J_iframe", parent.document).css('display','none'); 
            $("#content-main", parent.document).append(iframe_content);
        }
    </script>
{% endblock %}
